<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            background: #000;
            overflow: hidden;
        }

        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        h1 {
            position: relative;
            color: #464678;
            text-align: center;
            line-height: 8rem;
            font-size: 2rem;
            z-index: 100;
        }

        .aim {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: transparent;
            z-index: 50;
            -webkit-transform: translate3d(0, 0, 0);
        }

        .aim .c {
            position: absolute;
            top: 0;
            left: 0;
            width: 11px;
            height: 11px;
            background: #000;
            margin: -5px 0 0 -5px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            border: 1px solid #77f;
        }

        .aim .h {
            position: absolute;
            top: 1px;
            left: -50%;
            width: 200%;
            height: 1px;
            background: #77f;
            opacity: 0.5;
        }

        .aim .v {
            position: absolute;
            top: -50%;
            left: 1px;
            width: 1px;
            height: 200%;
            background: #77f;
            opacity: 0.5;
        }
    </style>
</head>

<body>
    <canvas id="sparks"></canvas>
    <script>
        "use strict";

        var OPT = {
            selector: "#sparks",
            amount: 10000,
            speed: 0.1, // pixels per frame
            lifetime: 500,
            direction: { x: -0.5, y: 1 },
            size: [1, 1],
            maxopacity: 1,
            color: "150, 150, 150",
            randColor: true,
            acceleration: [5, 40]
        };

        if (window.innerWidth < 520) {
            OPT.speed = 0.05;
            OPT.color = "150, 150, 150";
        }

        (function spark() {
            var canvas = document.querySelector(OPT.selector);
            var ctx = canvas.getContext("2d");

            var sparks = [];

            window.addEventListener('resize', function () {
                setCanvasWidth();
            });

            function setCanvasWidth() {
                ctx.canvas.width = window.innerWidth;
                ctx.canvas.height = window.innerHeight;
            }

            function rand(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }

            // Init animation
            function init() {
                setCanvasWidth();

                window.setInterval(function () {
                    if (sparks.length < OPT.amount) {
                        addSpark();
                    }
                }, 1000 / OPT.amount);

                window.requestAnimationFrame(draw);
            }

            function draw() {
                ctx.fillStyle = 'rgba(0,0,0, 0.1)';
                ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

                sparks.forEach(function (spark, i, array) {

                    if (spark.opacity <= 0) {
                        array.splice(i, 1);
                    } else {
                        drawSpark(spark);
                    }
                });

                window.requestAnimationFrame(draw);
            }

            function Spark(x, y) {
                this.x = x;
                this.y = y;
                this.age = 0;
                this.acceleration = rand(OPT.acceleration[0], OPT.acceleration[1]);

                this.color = OPT.randColor ? rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) : OPT.color;

                this.opacity = OPT.maxopacity - this.age / (OPT.lifetime * rand(1, 10));

                this.go = function () {
                    this.x += OPT.speed * OPT.direction.x * this.acceleration / 2;
                    this.y += OPT.speed * OPT.direction.y * this.acceleration / 2;

                    this.opacity = OPT.maxopacity - ++this.age / OPT.lifetime;
                };
            }

            function addSpark() {
                var x = rand(-200, window.innerWidth + 200);
                var y = rand(-200, window.innerHeight + 200);
                sparks.push(new Spark(x, y));
            }

            function drawSpark(spark) {
                var x = spark.x,
                    y = spark.y;

                spark.go();

                ctx.beginPath();
                ctx.fillStyle = "rgba(" + spark.color + ", " + spark.opacity + ")";
                ctx.rect(x, y, OPT.size[0], OPT.size[1], 0, 0, Math.PI * 2);
                ctx.fill();
            }

            init();
        })();
    </script>
</body>

</html>